.page-container {
	.camera-container {
		height: 680rpx;
		position: relative;

		.tips-container {
			position: absolute;
			z-index: 100;
			top: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			border: 2rpx solid #bebebe;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			background: rgba(0, 0, 0, 0.3);
			height: 66rpx;
			display: flex;
			align-items: center;
			padding: 0 28rpx;

			.text {
				color: white;
				font-size: 32rpx;
				//文本溢出时不换行
				white-space: nowrap;
				margin-left: 8rpx;
			}

			.warning-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.composition-frame {
			z-index: 100;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 700rpx;
			height: 442rpx;
			border: 5rpx solid #3b70e4;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.refuse-to-access-camera {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: black;

			.tips {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: max-content;
				max-width: 80vw;

				.text {
					color: white;
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}

				.btn {
					margin-top: 30rpx;
					width: 200rpx;
					height: 80rpx;
					background: #3b70e4;
					color: white;
					border-radius: 40rpx;
					font-size: 32rpx;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
	}

	.example-container {
		margin-top: 36rpx;
		display: flex;
		justify-content: center;

		.example {
			width: 270rpx;
			height: 168rpx;
		}
	}

	.shoot-btn-container {
		display: flex;
		justify-content: center;
		margin-top: 70rpx;

		.shoot-btn {
			background-color: #3b70e4;
			color: white;
			padding: 0 126rpx;
			height: 84rpx;
			border-radius: 42rpx;
			font-size: 32rpx;
			line-height: 84rpx;

			&.disabled {
				background-color: #bebebe;
			}
		}
	}
}
